import React, { useState, useMemo } from 'react';
import memo from '../common/wrapMemo';
import { Scrollbars } from 'react-custom-scrollbars';
import style from './AuditDetail.module.scss';
import { CloseOutlined } from '@ant-design/icons';
import { Input, Space, Button, message } from 'antd';
import api from '../../api';
import { connect } from 'react-redux';

import MapModel from '../dataManage/MapModel';

const { TextArea } = Input;

const statusTag = {
    "0": { color: '00e9ff', text: '待审核' },
    "1": { color: '#00f794', text: '已通过' },
    "2": { color: '#ff0000', text: '未通过' },
};

const AuditDetail = memo((props) => {
    const { onClose, onRefresh, data, fields } = props;

    let {
        operationLayer,
        checkState,
        operationId,
        check_des,
        operationContent: { operation, items = {}, itemsPrev = {}, uid },
    } = data;
    
    const [desc, setDesc] = useState(check_des || '');
    const [isMapModalVisible, setIsMapModelVisible] = useState(false);              // 地图model显隐
    const [featureDetail, setFeatureDetail] = useState({});

    const onAudit = async (state) => {
        const params = {
            checkDes: desc,
            checkState: state,
            operationId: operationId
        };

        api.layer.auditUpdateData(params)
            .then(res => {
                const {code} = res.data;
                if(code === 200) {
                    message.success('审核成功！');
                    onRefresh();
                }else{
                    message.error('审核失败！');
                }
            }).catch(err => {
                console.log(err);
                message.error('审核失败！');
            }).finally(() => {

            });
    };

    const handlePreview = () => {
        setIsMapModelVisible(true);
        let data = {uid};
        if(items['geojson']){
            data['geojson'] = items['geojson'];
        }else{
            data['geojson'] = itemsPrev['geojson'];
        }
        setFeatureDetail(data);
    };

    const newData = useMemo(() => {
        let data = {};
        if(!itemsPrev){
            itemsPrev = {};
            data = {...items};
        }else{
            if(Object.keys(itemsPrev).length === 0){
                Object.keys(items).forEach(key => {
                    if(key !== 'uid' && key !== 'temp'){
                        data[key] = items[key];
                    }
                })
            }else{
                Object.keys(items).forEach(key => {
                    if(itemsPrev[key] && key !== 'geojson' && key !== 'uid'){
                        if(items[key] !== itemsPrev[key]){
                            data[key] = items[key];
                        }
                    }
                });
            }
        }
        
        return data;
    },[items, itemsPrev]);

    return (
        <>
            <div className={style.auditDetail}>
                <div className={style.head}>
                    <span>数据详情</span>
                    <CloseOutlined onClick={onClose} />
                </div>
                <div className={style.operateInfo}>
                    <div className={style.row}>
                        <span>操作记录编号</span>
                        <span>{operationId}</span>
                    </div>
                    <div className={style.row}>
                        <span>操作图层</span>
                        <span>{operationLayer}</span>
                    </div>
                    <div className={style.row}>
                        <span>操作类型</span>
                        <span>{operation}</span>
                    </div>
                    <div className={style.row}>
                        <span>审核状态</span>
                        <span style={{ color: statusTag[checkState].color }}>
                            {statusTag[checkState].text}
                        </span>
                    </div>
                </div>
                <div className={style.fieldInfo}>
                    <div className={style.title}>
                        <span>字段信息</span>
                        <span className={style.preview} onClick={handlePreview}>图斑预览</span>
                    </div>
                    <Scrollbars autoHeight autoHeightMin={0} autoHeightMax={90}>
                    {
                        Object.keys(itemsPrev).length === 0 &&
                        Object.keys(newData).map((key, index) => {
                            const label = fields[key] ? fields[key] : key;
                            return (
                                <div className={style.fieldRow} key={index}>
                                    <div className={style.fieldRowItem}>
                                        <span className={style.label} title={label}>{label}</span>
                                        <span className={style.label2}>:</span>
                                        <div className={style.valBlock} title={newData[key]}>{newData[key]}</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    {
                        Object.keys(itemsPrev).length > 0 && 
                        Object.keys(newData).map((key, index) => {
                            const label = fields[key] ? fields[key] : key;
                            return (
                                <div className={style.fieldRow} key={index}>
                                    <div className={style.fieldRowItem}>
                                        <span className={style.label} title={label}>{fields[key] ? fields[key] : key}</span>
                                        <div className={style.valBlock} title={itemsPrev[key]}>{itemsPrev[key]}</div>
                                    </div>
                                    <div className={style.fieldRowItem}>
                                        <span className={style.label2}>改为</span>
                                        <div className={style.valBlock} title={items[key]}>{items[key]}</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    </Scrollbars>  

                    {/* {fieldRowCom} */}
                    {/* <div className={style.fieldRow}>
                        <div className={style.fieldRowItem}>
                            <span className={style.label}>乡镇名称</span>
                            <div className={style.valBlock}></div>
                        </div>
                        <div className={style.fieldRowItem}>
                            <span className={style.label2}>改为</span>
                            <div className={style.valBlock}>{items?.乡镇名称 || ''}</div>
                        </div>
                    </div>
                    <div className={style.fieldRow}>
                        <div className={style.fieldRowItem}>
                            <span className={style.label}>面积（公顷）</span>
                            <div className={style.valBlock}></div>
                        </div>
                        <div className={style.fieldRowItem}>
                            <span className={style.label2}>改为</span>
                            <div className={style.valBlock}>{items?.面积 || ''}</div>
                        </div>
                    </div> */}
                </div>

                <div className={style.desc}>
                    <div className={style.title}>审核说明</div>
                    <TextArea
                        value={desc}
                        onChange={(e) => setDesc(e.target.value)}
                        rows={6}
                        maxLength={6}
                    />
                </div>

                <div className={style.btnWrap}>
                    <Space size="middle">
                        <Button className={style.deleteBtn} onClick={() => onAudit('2')}>
                            未审核通过
                        </Button>
                        <Button className={style.passBtn} onClick={() => onAudit('1')}>
                            通过审核
                        </Button>
                    </Space>
                </div>
            </div>
            <div className={style.mask}></div>
            { 
                isMapModalVisible && 
                    <MapModel 
                        operationType="preview"
                        featureDetail={featureDetail}
                        isMapModalVisible={isMapModalVisible}
                        setIsMapModelVisible={setIsMapModelVisible}/>
            }
        </>
    );
});

function mapStateToProps(state) {
    return {
        userInfo: state.get('userInfo'),
    };
}

export default connect(mapStateToProps)(AuditDetail);
